<div
  data-controller="ui--switch"
  class="flex items-center space-x-2 cursor-pointer"
  data-action="click->ui--switch#toggle"
  data-state="<%= state %>">
  <input type="hidden" value="<%= state %>" name="<%= name %>">
  <button
    type="button"
    role="switch"
    aria-checked="false"
    data-state="<%= state %>"
    class="peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input"
    id="<%= id %>">
    <span
      data-state="<%= state %>"
      class="pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0">
    </span>
  </button>
  <label
    data-action="click->ui--switch#toggle"
    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
    for="<%= id %>">
      <%= text %>
  </label>
</div>
